import { testNumber, isString, isObj, empty, trim } from "./";
const SCOPE = "utils/style";

export const addUnit = (value?: string | number, unit = "px") => {
	if (empty(value)) return "";
	return testNumber(value) ? `${value}${unit}` : `${value}`;
};

// function _addStyle(
// 	customStyle: undefined,
// 	target: "object" | "string"
// ): undefined

function _addStyle(
	customStyle: string | (Record<string, string | number>),
	target?: "object" 
): Record<string, string | number>

function _addStyle(
	customStyle: string | (Record<string, string | number>) ,
	target?: "string" 
): string
/**
 * 样式转换
 * 对象转字符串，或者字符串转对象
 * @param {Object | String} 需要转换的目标
 * @param {String} 转换的目的，object-转为对象，string-转为字符串
 */
function _addStyle  (
	customStyle?: string | (Record<string, string | number>),
	target: "object" | "string" = "object"
)  {
	// 字符串转字符串，对象转对象情形，直接返回
	if (
		empty(customStyle) ||
		(isObj(customStyle) && target === "object") ||
		(target === "string" && typeof customStyle === "string")
	) {
		return customStyle;
	}
	// 字符串转对象
	if (target === "object" && isString(customStyle)) {
		// 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
		customStyle = trim(customStyle);
		// 根据";"将字符串转为数组形式
		const styleArray = customStyle.split(";");
		const style: Record<string, string | number> = {};
		// 历遍数组，拼接成对象
		for (let i = 0; i < styleArray.length; i++) {
			// 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
			if (styleArray[i]) {
				const item = styleArray[i].split(":");
				style[trim(item[0])] = trim(item[1]);
			}
		}
		return style;
	}
	if (isObj(customStyle)) {
		// 这里为对象转字符串形式
		let string = "";
		for (const i in customStyle) {
			// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
			const key = i.replace(/([A-Z])/g, "-$1").toLowerCase();
			string += `${key}:${customStyle[i]};`;
		}
		// 去除两端空格
		return trim(string);
	}
	return customStyle;
};

export const addStyle = _addStyle

const namespace = "e";
// join var name
// for example: (['button', 'text-color']) => '--e-button-text-color'
const joinVarName = (names: string[]) => {
	return `--${namespace}-${names.join("-")}`;
};

export const getCssVarName = (...args: string[]) => {
	return joinVarName(args);
};

/**
 * @description 用于获取用户传递值的px值  如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
 * 
 */
function _getPx (value: number | string, unit?:false):number
function _getPx (value: number | string, unit:true):string
function _getPx (value: number | string, unit= false) {
	if (testNumber(value)) {
		return unit ? `${value}px` : Number(value);
	}
	// 如果带有rpx，先取出其数值部分，再转为px值
	if (/(rpx|upx)$/.test(`${value}`)) {
		return unit
			? `${uni.upx2px(parseInt(`${value}`))}px`
			: Number(uni.upx2px(parseInt(`${value}`)));
	}
	return unit ? `${parseInt(`${value}`)}px` : parseInt(`${value}`);
}
export const getPx = _getPx
